<template>
    <div>
        <div class="form">
            <h5>电站信息</h5>
            <el-form label-position="right" style="width:680px" :rules="rules" ref="ruleForm" label-width="100px" :model="stationInfo">
                <el-form-item prop="power_num" label="充电站编号:">
                    <el-input :disabled="disabled" v-model="stationInfo.power_num" placeholder="请输入电站编号"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="充电站名称:">
                    <el-input :disabled="disabled" v-model="stationInfo.name" placeholder="请输入电站名称"></el-input>
                </el-form-item>
                <el-form-item prop="address" label="充电站位置:">
                    <el-cascader
                        :disabled="disabled"
                        size="large"
                        :options="options"
                        v-model="stationInfo.address"
                        @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item prop="address_detailed">
                        <el-input
                        :disabled="disabled"
                        style="width:528px;background:#F0F1F6;"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入详细地址"
                        v-model="stationInfo.address_detailed">
                    </el-input>
                </el-form-item>

                <el-row :gutter="10"  type="flex">
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="7">
                        <el-form-item prop="longitude" label="经度:">
                            <el-input :disabled="disabled" style="width:210px" v-model="stationInfo.longitude" placeholder="请输入电站纬度坐标"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="6" :offset="4">
                        <el-form-item prop="latitude" label="纬度:">
                            <el-input :disabled="disabled" style="width:210px" v-model="stationInfo.latitude" placeholder="请输入电站纬度坐标"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10"  type="flex">
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="7">
                            <el-form-item prop="price_name_id" label="费用规则:">
                                <el-select :disabled="disabled" style="width:210px" v-model="stationInfo.price_name_id" placeholder="请选择">
                                    <el-option
                                        v-for="item in feeRulesOption"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                    </el-col>
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="6" :offset="4">
                            <el-form-item prop="reservation" label="预约模式:">
                                <el-select :disabled="disabled" style="width:210px" v-model="stationInfo.reservation" placeholder="请选择">
                                    <el-option
                                    v-for="item in preOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                    </el-col>
                </el-row>


                <el-form-item prop="tag" label="标签:">
                    <el-input :disabled="disabled" v-model="stationInfo.tag" placeholder="请输入标签，多个标签请用逗号隔开"></el-input>
                </el-form-item>
                <h5 class="other">其他信息</h5>
                <el-form-item label="营业时间:">
                    <el-time-select
                        :disabled="disabled"
                        style="width: 210px;"
                        placeholder="开始时间"
                        v-model="stationInfo.open_time"
                        :picker-options="{
                        start: '00:00:00',
                        step: '00:15:00',
                        end: '24:00:00'
                        }">
                    </el-time-select>&emsp;&emsp13;&emsp13;————&emsp;&emsp13;
                    <el-time-select
                        :disabled="disabled"
                        style="width: 210px;"
                        placeholder="结束时间"
                        v-model="stationInfo.end_time"
                        :picker-options="{
                        start: '00:00:00',
                        step: '00:15:00',
                        end: '24:00:00',
                        minTime: stationInfo.open_time
                        }">
                    </el-time-select>
                </el-form-item >
                <el-form-item prop="parking_expenses" label="停车费用:">
                    <el-input :disabled="disabled" v-model="stationInfo.parking_expenses" placeholder="请输入停车费用"></el-input>
                </el-form-item>
                <el-form-item prop="parking_expenses_max" label="单次封顶:">
                    <el-input :disabled="disabled" v-model="stationInfo.parking_expenses_max" placeholder="请输入单次封顶"></el-input>
                </el-form-item>
                <el-form-item prop="operator" label="服务提供:">
                    <el-input :disabled="disabled" v-model="stationInfo.operator" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item prop="url" label="电站图片:">
                    <!-- action="https://api.yuelaidian.com/admin/UploadImage"  -->
                    <!-- <el-upload
                        action=""
                        :headers="headers"
                        class="avatar-uploader"
                        :show-file-list="false"
                        :on-change="uploadImg"
                        :data="{name:'chongdianzhan'}"
                        :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
                </el-form-item>
                <el-form-item prop="status" label="状态:">
                    <el-select :disabled="disabled" class="select" v-model="stationInfo.status" placeholder="请选择">
                        <el-option
                        v-for="item in stateOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div v-if="!$route.query.detail">
                    <el-form-item>
                        <el-button class="cancel" @click="$router.push('/gasStations')">取消</el-button>
                        <el-button v-if="$route.query.revise" class="confirm" @click="preserve('ruleForm')">保存</el-button>
                        <el-button v-else class="confirm" @click="submitForm('ruleForm')">确定</el-button>
                    </el-form-item>
                </div>
            </el-form>
          
        </div>
    </div>
</template>

<script>
    import { regionData,CodeToText, TextToCode } from 'element-china-area-data'
    import api from '../../../../api/jur.js'
    import uploadImage from '@/utils/upload.js'
    export default {
        data() {
            return {
                headers: {
                    'token':localStorage.getItem('token'),
                    Authorization: localStorage.getItem('token')
                },
                disabled:false,
                options: regionData,
                selectedOptions: [],
                feeRule:'',
                pre:'',
                stateVal:'',
                feeRulesOption:[
                    {
                        value:0,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'计费规则'
                    },
                ],
                preOption:[
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'支持'
                    },
                    {
                        value:0,
                        label:'不支持'
                    },
                ],
                stateOptions:[
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'启用'
                    },
                    {
                        value:0,
                        label:'禁用'
                    },
                ],
                stationInfo:{
                    photograph:'123'
                },
                rules: {
                    name: [
                        { required: true, message: '请输入正确的充电站名称', trigger: 'blur' },
                        { min: 3, message: '长度在 3 个字符以上', trigger: 'blur' }
                    ],
                    power_num: [
                        { required: true, message: '请输入编号', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    // address: [
                    //     { required: true, message: '请输入正确的充电站位置', trigger: 'blur' },
                    //     { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    // ],
                    address_detailed: [
                        { required: true, message: '请输入正确的详细地址', trigger: 'blur' },
                        { min: 5, message: '长度在 5 个字符以上', trigger: 'blur' }
                    ],
                    longitude: [
                        { required: true, message: '请输入经度', trigger: 'blur' }
                    ],
                    latitude: [
                        { required: true, message: '请输入纬度', trigger: 'blur' }
                    ],
                    price_name_id: [
                        {  required: true, message: '请选择费用规则', trigger: 'change' }
                    ],
                    reservation: [
                        {  required: true, message: '请选择预约模式', trigger: 'blur' }
                    ],
                    tag: [
                        { required: true, message: '请输入标签', trigger: 'blur' }
                    ],
                    parking_expenses: [
                        {  required: true, message: '请输入停车费用', trigger: 'blur' }
                    ],
                    parking_expenses_max: [
                        { required: true, message: '请输入单日封顶', trigger: 'blur' }
                    ],
                    operator: [
                        { required: true, message: '请输入运营商', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'change' }
                    ]
                },
                imageUrl:''
            }
        },  
        computed:{
            fullAddress:function(){
                    return this.selected.province +"-"+ this.selected.city +"-"+ this.selected.area
                }
            },
        created() {
            console.log(11111)
            if(this.$route.query.detail){
                this.disabled = true
                this.getStationInfo(this.$route.query.id)
                console.log(11111111)
            } else if(this.$route.query.revise){
                console.log(1111)
                this.getStationInfo(this.$route.query.id)
            }
            
        },
        methods: {
            handleChange (value) {
                this.stationInfo.address = `${CodeToText[value[0]]}-${CodeToText[value[1]]}-${
                    CodeToText[value[2]]
                }`
                console.log('地址',this.stationInfo.address)
            },
            handleEdit() {
                if (this.multiple.length === 1) {
                    this.dialogVisible = true;
                    this.$nextTick(() => {
                        let multiples = JSON.parse(JSON.stringify(this.multiple[0]));
                        //由于在添加和修改时将区域和详细地址合并
                        //所以回显时就需要再次将值拆分 分别赋值给对应的字段
                        let positionAll = multiples.position.split('-');
                        let priva = positionAll[0];
                        let arr = priva.split('/');
                        let c = {};
                        let d = [];
                        for (let i = 0; i <= arr.length - 1; i++) {
                            if (i === 0) {
                                c = TextToCode[arr[i]];
                                d.push(c.code)
                            } else {
                                c = c[arr[i]];
                                d.push(c.code)
                            }
                        }
                        this.selectedOptions = d;
                        this.ruleForm.position = this.selectedOptions;
                        this.iptval = positionAll[1];
                        this.ruleForm = multiples
                    })
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('发送对象',this.stationInfo)
                    api.addStation(this.stationInfo).then(res=>{
                        console.log('添加字段',res)
                        if(res.data.code == 200){
                            this.$message.success('添加成功')
                            setTimeout(()=>{
                                this.$router.push('/gasStations')
                            },500)
                        }
                    })
                    // 验证完成
                    // alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            preserve(formName) { // 修改
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    api.putStation(this.stationInfo).then(res=>{
                        console.log('修改',res)
                        if(res.data.code == 200){
                            this.$message.success('修改成功')
                            setTimeout(()=>{
                                this.$router.push('/gasStations')
                            },500)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            uploadImg(upFile){
                console.log('1111111',upFile)
            },
            getStationInfo(id){
                api.stationInfo({id}).then(res=>{
                    console.log('电站信息',res)
                    this.stationInfo = res.data.data
                })
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log('11111111',res,file)
            },
            handlePictureCardPreview(){}
        },
    }
</script>

<style lang="less" scoped>
h5{
    text-align: left;
    font-size: 16px;
    margin-bottom: 24px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
}
.el-input{
    text-align: left;
    width: 528px;
}

.form{
    margin-left: 100px;
    text-align: left;
}
.el-time-select{
    display: inline-block;
    width: 210px;
}
.select{    
    width: 528px;
}
.cancel,.confirm{
    font-size: 16px;
    padding: 14px 54px;
}
.cancel{
    margin-top: 5px;
    font-weight: 600;
    margin-left: 112px;
}
.confirm{
    background: #165bff;
    color: white;
    border: 0;
}
.other{
    margin-top: 32px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style>
.el-message-box__message{
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}
.el-textarea__inner {
    background: #f0f1f6 !important;
}
</style>